<template>
    <div>
        <el-page-header @back="router.push('/')" class="pageHeader">
            <template #content>
                <span class="text-large font-600 mr-3"> 数据管理 </span>
            </template>
        </el-page-header>
        <br>
        <div class="table">
            <el-button :icon="Plus" type="primary" @click="handleAdd">新增</el-button>
            <el-table :data="dataSrouce.slice((page - 1) * 10, page * 10)" style="width: 100%">
                <el-table-column fixed prop="id" label="序号" width="80" />
                <el-table-column fixed prop="title" label="题目" width="250" />
                <el-table-column prop="a" label="选项A" width="200" />
                <el-table-column prop="b" label="选项B" width="200" />
                <el-table-column prop="c" label="选项C" width="200" />
                <el-table-column prop="d" label="选项D" width="200" />
                <el-table-column prop="yes" label="正确答案" width="120" />
                <el-table-column fixed="right" label="Operations" width="120">
                    <template #default="row">
                        <el-button link type="primary" size="small" @click="handleUpdate(row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination v-model="page" :page-size="10" :pager-count="7" layout="prev, pager, next" :total="dataSrouce.length"
            @current-change="changePage" class="pageBar" />

        <el-dialog v-model="dialogVisible" title="新增" width="60%" :before-close="handleClose">
            <span>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="题目">
                        <el-input v-model="form.title" />
                    </el-form-item>
                    <el-form-item label="选项A">
                        <el-input v-model="form.a" />
                    </el-form-item>
                    <el-form-item label="选项B">
                        <el-input v-model="form.b" />
                    </el-form-item>
                    <el-form-item label="选项C">
                        <el-input v-model="form.c" />
                    </el-form-item>
                    <el-form-item label="选项D">
                        <el-input v-model="form.d" />
                    </el-form-item>
                    <el-form-item label="正确答案">
                        <el-input v-model="form.yes" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="handleAddPush">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script  setup lang="ts">
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import {
    Plus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";

const router = useRouter();


const url = 'https://hyl999.co:7777'

const dataSrouce = ref([])
const dialogVisible = ref(false)
const page = ref(1)

const form = reactive({
    title: '',
    a: '',
    b: '',
    c: '',
    d: '',
    yes: '',
})

const refresh = () => {
    axios.get(url + '/answer/query?orderBys=id desc').then(res => {
        dataSrouce.value = res.data.data

    })
}

onMounted(() => {
    refresh()


})



const changePage = (val: number) => page.value = val

const handleClose = (done: () => void) => {
    done()
}

const handleAdd = () => {
    Object.assign(form, {
        title: '',
        a: '',
        b: '',
        c: '',
        d: '',
        yes: '',
    })
    dialogVisible.value = true
}

const handleAddPush = () => {
    axios.post(url + '/answer/add', form).then(() => {
        ElMessage('新增成功')
        refresh()

        dialogVisible.value = false
    })
}

const handleUpdate = (row: any) => {

    Object.assign(form, row.row)
    dialogVisible.value = true
}

const handleDelete = (row: any) => {
    axios.delete(url + '/answer/delete', { params: { id: row.row.id } }).then(() => {
        ElMessage('删除成功')
        refresh()

        dialogVisible.value = false
    })
}


</script>
  
<style>
.pageHeader {
    padding: 15px;
}

.table {
    margin: 0 auto;
    width: 70%;
}

.pageBar {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
}
</style>